<template>
  <div ref="scrollBox" class="scrollBox">
    <companyInfo ref="companyInfo" type="project" />
    <div id="target" v-loading="loading" class="list-table noPad bussRisk">
      <div :class="{'targetFixed':ifFixed}">
        <el-tabs v-model="view" @tab-click="handleClick">
          <el-tab-pane :label="$t('股东信息') + ' ' + risk.holderCount" name="holders" />
          <el-tab-pane :label="$t('主要人员') + ' ' + risk.staffCount" name="staff" />
          <el-tab-pane :label="$t('融资历史') + ' ' + risk.historyCount" name="financingHistory" />
          <el-tab-pane :label="$t('变更记录') + ' ' + risk.changeInfoCount" name="changeInfo" />
          <el-tab-pane :label="$t('经营风险') + ' ' + risk.riskCount" name="risk" />
          <el-tab-pane :label="$t('新闻舆情') + ' ' + risk.newsCount" name="news" />
          <el-tab-pane :label="$t('对外投资') + ' ' + risk.subsidiaryCount" name="subsidiary" />
          <!--          <el-tab-pane :label="$t('主要客户') + ' ' + risk.clientCount" name="majorClient" />-->
          <el-tab-pane :label="$t('竞品信息') + ' ' + risk.competitor" name="competitor" />
          <el-tab-pane :label="$t('专利信息') + ' ' + risk.patents" name="patents" />
        </el-tabs>
      </div>

      <el-row :gutter="24" class="mt15">
        <el-col id="holders" :span="16" :xs="24">
          <!-- 股东信息 holders -->
          <companyHolderChangeList :source-type="'bussRisk'" :height="tHeight" />
        </el-col>
        <el-col id="staff" :span="8" :xs="24">
          <!-- 主要人员 staff -->
          <companyStaffList :source-type="'bussRisk'" :height="tHeight" />
        </el-col>
      </el-row>
      <!-- 融资历史 financingHistory -->
      <companyFinanceTycList id="financingHistory" :source-type="'bussRisk'" />
      <!-- 变更记录 changeInfo -->
      <company-changeinfo-list id="changeInfo" :source-type="'bussRisk'" />
      <!-- risk -->
      <div id="risk">
        <!-- 异常经营 -->
        <company-abnormal-list :source-type="'bussRisk'" />
        <!-- 行政处罚 -->
        <company-adst-punish-list :source-type="'bussRisk'" />
        <!-- 法律诉讼 -->
        <company-legal-action-list :source-type="'bussRisk'" />
        <!-- 失信信息 -->
        <company-broken-list :source-type="'bussRisk'" />
        <!-- 法院公告 -->
        <company-court-list :source-type="'bussRisk'" />
      </div>
      <!-- 新闻舆情 news -->
      <company-news-list id="news" :source-type="'bussRisk'" />
      <!-- 对外投资 subsidiary -->
      <companySubsidiaryList id="subsidiary" :source-type="'bussRisk'" />
      <!-- 主要客户 majorClient -->
      <!--      <dealMajorClientList id="majorClient" :source-type="'bussRisk'" />-->
      <!-- 竞品信息 competitor -->
      <companyCompetitorList id="competitor" :source-type="'bussRisk'" />
      <!-- 专利 patents -->
      <companyPatentsList id="patents" :source-type="'bussRisk'" />
    </div>
  </div>
</template>

<script>
  import { companyInfo } from '@/components/Deal'
  import companyStaffList from '@/views/company/staff/companyStaffList.vue'
  import companyFinanceTycList from '@/views/company/finance/companyFinanceTycList.vue'
  import companyAbnormalList from '@/views/company/abnormal/companyAbnormalList.vue'
  import companyCourtList from '@/views/company/court/companyCourtList.vue'
  import companyNewsList from '@/views/company/news/companyNewsList.vue'
  import companyLegalActionList from '@/views/company/action/companyLegalActionList.vue'
  import companyBrokenList from '@/views/company/broken/companyBrokenList.vue'
  import companyAdstPunishList from '@/views/company/punish/companyAdstPunishList.vue'
  import companyChangeinfoList from '@/views/company/changeinfo/companyChangeinfoList.vue'
  import companySubsidiaryList from '@/views/company/subsidiary/companySubsidiaryList.vue'
  import companyHolderChangeList from '@/views/company/holder/companyHolderChangeList.vue'
  // import dealMajorClientList from '@/views/deal/majorclient/dealMajorClientList.vue'
  // import { listRiskTianyanchaUpdate } from '@/api/company/base/companyBase'
  import companyCompetitorList from '@/views/company/competitor/companyCompetitorList.vue'
  import companyPatentsList from '@/views/company/Patents/companyPatentsList.vue'
  import { mapState } from 'vuex'
  export default {
    components: {
      companyInfo,
      // dealMajorClientList,
      companyStaffList,
      companyFinanceTycList,
      companyChangeinfoList,
      companyHolderChangeList,
      companySubsidiaryList,
      companyNewsList,
      companyAbnormalList,
      companyCourtList,
      companyBrokenList,
      companyLegalActionList,
      companyAdstPunishList,
      companyCompetitorList,
      companyPatentsList
    },
  data() {
      return {
          // 遮罩层
          loading: false,
          // 弹出层标题
          title: '',
          // 表单参数
          form: {},
          // 查询参数
          queryParams: {
              id: this.$route.query.companyId
          },
          // 展示视图
          view: 'holders',
          // 变更数据条数
          changeInfoCount: 0,
          // 新闻数据条数
          newsCount: 0,
          // 股东信息
          holderCount: 0,
          // 主要人员
          staffCount: 0,
          // 融资历史
          historyCount: 0,
          // 对外投资
          subsidiaryCount: 0,
          // 主要客户
          clientCount: 0,
          // 经营风险
          riskCount: 0,
          // 竞品信息
           competitor: 0,
          // 专利
           patents: 0,
           targetTop: 0,
           ifFixed: false,
           tHeight: 0
      }
  },
  computed: {
    ...mapState('bussRisk', ['risk'])
  },
  watch: {
    'risk.holderCount': {
      handler(val) {
        if (val > 0 && this.risk.staffCount > 0) {
          var max = Math.max.apply(null, [val, this.risk.staffCount])
          this.tHeight = max * 40 + 40
        }
        if (val === 0 && this.risk.staffCount > 0) {
          this.tHeight = this.risk.staffCount * 40 + 40
        }
        if (val > 0 && this.risk.staffCount === 0) {
          this.tHeight = val * 40 + 40
        }
        if (val === 0 && this.risk.staffCount === 0) {
          this.tHeight = 102
        }
        if (val > 10 || this.risk.staffCount > 10) {
          this.tHeight = 440
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.onLoad()
    this.$refs.scrollBox.addEventListener('scroll', (res) => {
      var scrollTop = res.target.scrollTop
      this.targetTop = document.querySelector('#target').offsetTop
      if (scrollTop + 100 > this.targetTop) {
        this.ifFixed = true
      } else {
        this.ifFixed = false
      }
    }, true)
  },
  methods: {
    onLoad() {
      // this.$refs.companyInfo.init()
      this.loading = true
      // listRiskTianyanchaUpdate(this.queryParams).then(res => {
      //   if (res.code === 200) {
      //     this.changeInfoCount = res.data.changeInfoCount
      //     this.holderCount = res.data.holderCount
      //     this.newsCount = res.data.newsCount
      //     this.staffCount = res.data.staffCount
      //     this.historyCount = res.data.historyCount
      //     this.subsidiaryCount = res.data.subsidiaryCount
      //     this.clientCount = res.data.clientCount
      //     this.riskCount = res.data.riskCount
      //     this.competitor = res.data.competitor
      //     this.patents = res.data.patents
      //     this.loading = false
      //   }
      // })
      this.$store.dispatch('bussRisk/UPDATE_BUSS_RISK_COUNT', this.queryParams)
      this.loading = false
    },
    handleClick(row) {
      var anchor = document.getElementById(row.name)
      anchor.scrollIntoView()
    }
  }
}
</script>
<style lang="scss" scoped>
.targetFixed {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 9;
  background: #fff;
}
.scrollBox{
  height: calc(100vh - 100px);
  overflow: auto;
  margin-right: -15px;
  padding-right: 15px;
  scroll-padding-top: 60px;
}
</style>
